<template>
  <div class="home">
    <sy-top :indexUnit="indexUnit" @parentActive="parentActive" />
    <amap/>
    <transition name="slide-fade" mode="out-in" appear>
      <component :is="proxy" :indexUnit="indexUnit"></component>
    </transition>
  </div>
</template>

<script>
import HeaderMain from "components/content/header/HeaderMain.vue";
import Amap from "components/content/amap/Amap.vue";
import SyTop from "./syPage/SyTop.vue";
import SyNc from "views/sy/syPage/SyNc.vue";
import SyNm from "./syPage/SyNm.vue";
import SyNy from "./syPage/SyNy.vue"

import { ncdsj, nmdsj, nydsj } from "network/sy";
export default {
  components: {
    HeaderMain,
    Amap,
    SyTop,
    SyNc,
    SyNm,
    SyNy
  },
  data() {
    return {
      active: 0,
      indexUnit: null,
      proxy: "SyNc",
      datas: {}
    };
  },
  async created() {
    this.indexUnit = await this.indexUnitAxios();
    console.log(this.indexUnit);
  },
  methods: {
    async indexUnitAxios() {
      const all = await Promise.all([ncdsj(), nmdsj(), nydsj()]);
      const nc = all[0].gaikou;
      const nm = all[1].renkou;
      const ny = all[2].kaishi;
      return { nc, nm, ny };
    },
    parentActive(index) {
      this.active = index;
      switch (this.active) {
        case 0:
          this.proxy = "SyNc";
          break;
        case 1:
          this.proxy = "SyNm";
          break;
        case 2:
          this.proxy = "SyNy";
          break;
      }
    },
  },
};
</script>
<style scoped lang="scss">
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  // transform: translateX(20px);
  opacity: 0;
}

.home {
  width: 100%;
  height: 100%;
}
</style>